<template>
    <div class="table">
        <div class="crumbs orderTitle">
            <h1 class="orderH1">会员</h1>
        </div>

        <div class="container">
            <div class="selectStore checkCoupon_box">
                <div class="checkCoupon_from">
                    <el-input
                        v-model="searchMobile"
                        placeholder="输入会员手机号" class="checkCoupon_input" >
                        <el-button slot="append"  icon="el-icon-search" type="success" circle @click="querySearchAsync(searchMobile,1)"></el-button>
                    </el-input>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {
        storeAsGet,
        storeAsPost,
        storeAsPut
    } from '../api/api';
    import {formatDate} from '../tool/tool'
    export default {
        data() {
            return {
                searchMobile:'',
            }
        },
        created() {

        },
        computed: {},
        methods: {
            querySearchAsync:function(e){
                console.log(this.isUser)
                if(!e){
                    this.$message({
                        type: 'error',
                        message: '不能为空'
                    });

                }else{
                    this.voucherCode = e;
                    this.getMember(this,this.voucherCode);
                }
            },
            getMember:function(that,e){
                storeAsGet('/users/mobile?mobileNumber='+ e ).then(res=>{

                    console.log(res.data.content.user)
                    this.$router.push({
                        path: '/memberDetails',
                        query: {
                            id: e
                        }
                    })


                }).catch(function(res){
                    console.log(res)
                    that.$message({
                        type: 'error',
                        message: '您输入的手机号码有误！请重新输入'
                    });
                });
            },
        }


    }

</script>

<style scoped>
    .orderH1{
        font-size: 20px;
        color: #666;
        display: inline-block;
    }
    .orderTitle{
        margin-bottom: 20px;
    }
    .selectStore{
        padding-bottom: 20px;
        border-bottom:#eee 1px solid
    }
    .ticketBox{
        position: absolute;
        left: 50%;
        border: #ddd 1px solid;
        border-radius: 10px;
        width: 400px;
        margin: 15px 0 0 -210px;
        padding: 15px 20px;
        background: linear-gradient(-135deg, transparent 65px, #fefefe 0), linear-gradient(135deg, transparent 65px, #46a716 0);
    }
    .ticketBox  h1{
        text-align: center;
        font-size: 24px;
    }
    .ticketBox  h2{
        text-align: center;
        line-height: 60px;
        color: #999;

    }
    .ticketBox  p{
        text-align: center;
        margin-bottom: 60px;
    }
    .ticketBox .statusBox i{
        position: absolute;
        width: 70px;
        right: -9px;
        top: 23px;
        transform: rotate(45deg);
        color: #fff;
    }
    .ticketBox button{
        width: 100%;
        height: 40px;
        border-radius: 0 0 10px 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        font-size: 14px;
    }
    .phoneColor{
        color: red;
    }

    .checkCoupon_box{
        text-align: center;
    }
    .checkCoupon_from{
        display: inline-block;
        width: 400px;
    }
    .checkCoupon_box .el-input--small .el-input__inner{
        height: 60px!important;
    }
    .checkCoupon_input{
        font-size: 20px;
    }
</style>
